<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-29 19:04:54
-->
<template>
  <div>
    <ItemCard title="累计用户数" :number="usersTotal">
      <template #center>
        <v-chart :option="getOptions()" autoresize></v-chart>
      </template>
      <template #bottom>
        <div style="font-size: 12px; margin: 5px 0">
          <span style="margin-right: 5px">日同比:{{ userGrowthLastDay }}%</span>
          <span>月同比:{{ userGrowthLastMonth }}%</span>
        </div>
      </template>
    </ItemCard>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useEchartsStore } from '@/stores/echarts'
const echartsStore = useEchartsStore()

const usersTotal = computed(() => {
  return echartsStore.echartsData.usersTotal
})
const usersLastMonth = computed(() => {
  return echartsStore.echartsData.usersLastMonth
})
const userGrowthLastDay = computed(() => {
  return echartsStore.echartsData.userGrowthLastDay
})
const userGrowthLastMonth = computed(() => {
  return echartsStore.echartsData.userGrowthLastMonth
})

const getOptions = () => {
  return {
    xAxis: {
      data: [],
      max: usersTotal.value,
      min: 0,
      show: false,
      type: 'value',
    },

    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },
    yAxis: {
      show: false,
      type: 'category',
    },
    series: {
      name: '用户月增长量',
      type: 'bar',
      data: [usersTotal.value - usersLastMonth.value],
      color: 'skyblue',
      showBackground: true,
      barWidth: '30%',
      label: {
        show: true,
        distance: 30,
        color: 'skyblue',
        position: 'outside',
        formatter: '|',
      },
    },
  }
}
</script>

<script lang="ts">
export default {
  name: 'TotalUser',
}
</script>

<style lang="scss" scoped></style>
